<template>
  <div class="register-container">
    <!-- 标题 -->
    <div class="title">注册</div>

    <!-- 输入表单 -->
    <div class="form">
      <div class="input-group">
        <label>账号</label>
        <input type="text" placeholder="请输入账号" v-model="form.username" />
      </div>

      <div class="input-group">
        <label>密码</label>
        <input type="password" placeholder="请输入密码" v-model="form.password" />
      </div>

      <div class="input-group">
        <label>确认密码</label>
        <input type="password" placeholder="请再次输入密码" v-model="form.confirmPassword" />
      </div>
    </div>

    <!-- 注册按钮 -->
    <button class="register-btn" @click="handleRegister">注册</button>
    <button class="register-btn return-btn">
        <RouterLink to="/login">返回</RouterLink>
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {useRouter} from 'vue-router'
import axios from 'axios';
import config from "@/config"

const router = useRouter();

// 表单数据
const form = ref({
  username: '',
  password: '',
  confirmPassword: ''
});

// 注册逻辑（示例）
const handleRegister = async () => {
  if (!form.value.username || !form.value.password || !form.value.confirmPassword) {
    alert('请填写所有字段');
    return;
  }
  if (form.value.password !== form.value.confirmPassword) {
    alert('两次密码不一致');
    return;
  }
  // 这里可以调用 API 提交注册
  let data = await axios.post(config.api + 'auth/register', {
      username: form.value.username,
      password: form.value.password
    }, {
      withCredentials: true
    });
  
  alert(data.data.msg);
  if (data.data.status == '0') {
    router.push('/login');
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a:link {text-decoration:none;}
a:visited {text-decoration:none; color: white;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 40px 20px;
  font-family: 'Arial', sans-serif;
}

/* 标题样式 */
.title {
  font-size: 28px;
  color: #333;
  margin-bottom: 30px;
  font-weight: bold;
}

/* 表单区域 */
.form {
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 输入框组 */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-group label {
  font-size: 15px;
  color: #555;
}

.input-group input {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.input-group input:focus {
  border-color: #007bff;
}

/* 注册按钮 */
.register-btn {
  margin-top: 25px;
  padding: 14px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  max-width: 350px;
  transition: background-color 0.3s;
}

.register-btn:hover {
  background-color: #0056b3;
}

.return-btn a{
    display: block;
}

/* 小屏适配 */
@media (max-width: 480px) {
  .title {
    font-size: 26px;
  }

  .form, .register-btn {
    max-width: 100%;
  }
}
</style>